// 轮播图模块
;
(function () {
    // 轮播图模块
    // 获取轮播图相关元素
    var slideshow = document.querySelector('.slideshow');
    // 获取前后切换箭头
    var forword = slideshow.querySelector('.forword');
    var next = slideshow.querySelector('.next');
    // 获取轮播图内容区域
    var ul = slideshow.querySelector('ul');
    // 获取小圆点
    var circle = slideshow.querySelector('.circle');
    // 经过轮播图和离开轮播图的事件
    slideshow.addEventListener('mouseover', function () {
        // 鼠标经过的时候停止自动轮播
        clearInterval(timer);
        // 鼠标经过的时候显示左右箭头
        forword.style.display = 'block';
        next.style.display = 'block';
    });
    slideshow.addEventListener('mouseout', function () {
        // 鼠标离开的时候开启自动轮播
        timer = setInterval(function () {
            next.click();
        }, 2000);
        // 鼠标离开的时候隐藏左右箭头
        forword.style.display = 'none';
        next.style.display = 'none';
    });
    // 无缝滚动，把ul的第一个li克隆到ul的最后面
    var lastLi = ul.children[0].cloneNode(true);
    ul.appendChild(lastLi);
    // 给每个轮播图的图片添加索引
    for (var i = 0; i < ul.children.length; i++) {
        ul.children[i].setAttribute('index', i);
    }
    // 动态生成小圆点数量 因为有无缝轮播存在，所以应该把ul里面子元素数量-1
    for (var i = 0; i < ul.children.length - 1; i++) {
        var circle_li = document.createElement('li');
        circle.appendChild(circle_li);
    }
    // 计数器，计算盒子位置的索引
    var index = 0;
    // 节流阀，防止用户点击过快
    var flag = true;
    // 打开浏览器默认给第一个小圆点添加样式
    update();
    // 点击左右箭头，轮播图切换事件
    next.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (index == ul.children.length - 1) {
                index = 0;
                ul.style.left = 0;
            }
            index++;
            // 每次点击后，元素移动到索引 * li的盒子大小
            animate(ul, -index * ul.children[0].offsetWidth, function () {
                flag = true;
            });
            // 更新小圆点状态
            update();
        }
    });
    forword.addEventListener('click', function () {
        if (flag) {
            flag = false;
            if (index == 0) {
                index = ul.children.length - 1;
                ul.style.left = -index * ul.children[0].offsetWidth + 'px';
            }
            index--;
            // 每次点击后，元素移动到索引 * li的盒子大小
            animate(ul, -index * ul.children[0].offsetWidth, function () {
                flag = true;
            });
            // 更新小圆点的状态
            update();
        }
    });
    // 点击小圆点时，轮播图会跟着切换
    // 因为点击事件里面的函数时异步函数，如果用var声明i，则点击事件里面的i的值固定为小圆点的数量
    for (let i = 0; i < circle.children.length; i++) {
        circle.children[i].addEventListener('click', function () {
            if (flag) {
                flag = false;
                // 干掉所有人
                for (var j = 0; j < circle.children.length; j++) {
                    circle.children[j].classList.remove('current');
                }
                // 留下我自己
                circle.children[i].classList.add('current');
                // 如果此时图片为最后一张图片，则重新跳转回第一张图片，并重置index
                if (index == ul.children.length - 1) {
                    index = 0;
                    ul.style.left = 0;
                }
                // 把小圆点的索引赋值给index
                index = i;
                // 图片进行滚动
                animate(ul, -index * ul.children[0].offsetWidth, function () {
                    flag = true;
                });
            }
        })
    }
    // 自动播放
    var timer = setInterval(function () {
        next.click();
    }, 2000)
    // 用于更新轮播图下面小圆点的状态
    function update() {
        var circleIndex = index == ul.children.length - 1 ? 0 : index;
        for (var i = 0; i < circle.children.length; i++) {
            circle.children[i].classList.remove('current');
        }
        circle.children[circleIndex].classList.add('current');
    }
})();
// 返回顶部模块
(function () {
    var home = document.querySelector('.home');
    window.addEventListener('scroll', function (e) {
        if (window.scrollY >= 200) {
            home.style.display = 'block';
        } else {
            home.style.display = 'none';
        }
    });
    home.addEventListener('click', function () {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(home.timer);
        home.timer = setInterval(function () {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((0 - window.scrollY) / 10);
            var step = (0 - window.scrollY) / 5;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.scrollY == 0) {
                // 停止动画 本质是停止定时器
                clearInterval(home.timer);
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            window.scroll(0, window.scrollY + step)
        }, 15);
    })
})();
// 3分钟科普连接模块
(function () {
    var knowledge = document.querySelector('.knowledge');
    var p = knowledge.querySelector('p');
    var a = p.querySelectorAll('a');
    for (var i = 0; i < a.length; i++) {
        var link = a[i].innerHTML;
        a[i].href = `https://www.baidu.com/s?ie=UTF-8&wd=${link}`;
        a[i].target = `_black`;
    }
})()